<template>
	<view class="formCity">
		<uni-forms ref="fors" :modelValue="form" :rules="rules" validate-trigger="bind">

			<uni-forms-item name="receiver">
				<view class="name">
					<view>姓名</view>
					<input v-model="form.receiver" type="text" placeholder="请填写收货人姓名"
						placeholder-style="font-size: 28rpx">
				</view>
			</uni-forms-item>

			<uni-forms-item name="contact">
				<view class="name">
					<view>手机号码</view>
					<input type="number" v-model="form.contact" placeholder-style="font-size: 28rpx" maxlength="11"
						placeholder="请填写收货人手机号">
				</view>
			</uni-forms-item>

			<uni-forms-item name="fullLocation">
				<view class="name shi">
					<view>省/市/区</view>
					<!-- 城市 -->
					<picker :value="valuearray" mode="region" @change="bindPickerChange">
						<view style="; color: #808080;" class="address">
							{{form.fullLocation || "请选择省/市/区" }}
						</view>
					</picker>
				</view>
			</uni-forms-item>

			<uni-forms-item name="address">
				<view class="name">
					<view>详情地址</view>
					<input v-model="form.address" type="text" placeholder="请填写详情地址"
						placeholder-style="font-size: 28rpx">
				</view>
			</uni-forms-item>

			<uni-forms-item name="isDefault">
				<view class="name">
					<view>设置默认地址</view>
					<switch color="#00d2ae" style="transform:scale(0.7)" :checked="form.isDefault"
						@change="changeisDefault" />
				</view>
			</uni-forms-item>

			<button @click="addCity" class="addcart" form-type="submit">保存</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		postCityPost,
		getCityGET,
		getCityPUT
	} from '@/api/city.js'
	export default {
		name: "AddCity",
		props: {
			cid: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				valuearray: [],
				rules: {
					receiver: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名',
						}]
					},
					contact: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							minLength: 11,
							errorMessage: '请输入正确的手机号',
						}]
					},
					fullLocation: {
						rules: [{
							required: true,
							errorMessage: '请输入省/市/区',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详情地址',
						}]
					}
				},
				form: {
					receiver: '', // 收货人姓名
					contact: '', // 联系方式
					provinceCode: '', // 所在省份编码
					cityCode: '', // 所在城市编码
					countyCode: '', // 所在区/县编码
					address: '', // 详细地址
					isDefault: 0, //是否为默认，1为是，0为否
					fullLocation: '' // 地址详情
				}
			};
		},
		// 修改
		mounted() {
			// 判断是否传了cid
			if (this.cid) {
				this.getCityGET()
			} else {
				return
			}
		},
		computed: {
			...mapState('pay', ['from'])
		},
		methods: {
			// 获取地址详情
			async getCityGET() {
				const res = await getCityGET(this.cid)
				this.form = res.result
				this.valuearray = this.form.fullLocation.split(' ');
			},
			// 省市区级联
			bindPickerChange(e) {
				const {
					code,
					value
				} = e.detail
				this.form.fullLocation = value.join(' ')
				this.form.provinceCode = code[0]
				this.form.cityCode = code[1]
				this.form.countyCode = code[2]
			},
			changeisDefault() {
				if (this.form.isDefault) {
					this.form.isDefault = 0
				} else {
					this.form.isDefault = 1
				}
			},
			async addCity() {
				// 校验
				await this.$refs.fors.validate()
				// 判断是修改还是添加
				if (this.cid) {
					// 清空校验
					await this.$refs.fors.clearValidate()
					const res = {
						...this.form,
						address: this.form.address,
						fullLocation: this.valuearray.join(' ')
					}
					await getCityPUT(res)
					// 跳转
					/* uni.reLaunch({
						url: `/subpkg/address/address?from=${this.from}`
					}) */
					uni.navigateBack()
				} else {
					// 添加
					await postCityPost(this.form)
					// // 清空
					// this.form = {}
					// 判断是否是从购物页面跳转来的
					if (this.type) {
						// 跳转购物车
						uni.reLaunch({
							url: `/subpkg/goods_detail/goods_detail?id=${this.type}`
						})
					} else {
						// 跳转
						/* uni.reLaunch({
							url: `/subpkg/address/address?from=${this.from}`
						}) */
						uni.navigateBack()
					}
				}

				uni.showToast({
					title: '操作成功',
					duration: 2000
				});


			}
		},
	}
</script>

<style lang="less">
	.formCity {
		margin-top: 43rpx;
		margin-left: 39rpx;

		.name {
			display: flex;
			// height: 80rpx;
			border-bottom: 1rpx ridge #eaeaea;
			padding-bottom: 40rpx;
			justify-content: space-between;
		}

		.shi {
			.address {
				font-size: 28rpx;
				width: 313.6rpx;
			}

		}

		.addcart {
			position: absolute;
			bottom: 20rpx;
			left: 41rpx;
			width: 671rpx;
			height: 80rpx;
			font-size: 25rpx;
			color: #fff;
			background: linear-gradient(to right, #00d2ae, #00d2ae, #00bd9a, #00bd9a);
			line-height: 80rpx;
		}
	}
</style>